<template>
  <div class="wrapper">
    <div class="inner">
      <div class="profile-wrapper">
        <!-- 左侧导航 -->
        <nav class="sidebar">
          <ul>
            <li
              v-for="item in navItems"
              :key="item.value"
              :class="{ active: route.name === item.value }"
              @click="navigateTo(item.value)"
            >
              <img
                :src="route.name === item.value ? item.activeIcon : item.icon"
                :alt="item.name"
              />
              <span>{{ item.name }}</span>
            </li>
          </ul>
        </nav>

        <!-- 右侧内容区 -->
        <div class="content">
          <router-view></router-view>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue' // 添加 onMounted
import { useRouter, useRoute } from 'vue-router'
import { AppConfigStore } from '@/stores/app' // 添加这行导入
import { userStore } from '@/stores/user'

const router = useRouter()
const route = useRoute()
const appConfig = AppConfigStore() // 添加这行
const userStoreInfo = userStore()

// 添加这个函数来检查 token
onMounted(() => {
  if (!userStoreInfo.token) {
    router.push({ path: '/' }) // 跳转到首页
  }
})

const navItems = ref([
  {
    icon: new URL('@/assets/icons/profile/profile.webp', import.meta.url).href,
    activeIcon: new URL('@/assets/icons/profile/profile-active.webp', import.meta.url).href,
    name: '个人资料',
    value: 'profile'
  },
  {
    icon: new URL('@/assets/icons/profile/wallet.webp', import.meta.url).href,
    activeIcon: new URL('@/assets/icons/profile/wallet-active.webp', import.meta.url).href,
    name: '我的钱包',
    value: 'wallet'
  },
//   {
//     icon: new URL('@/assets/icons/profile/vip.webp', import.meta.url).href,
//     activeIcon: new URL('@/assets/icons/profile/vip-active.webp', import.meta.url).href,
//     name: '我的会员',
//     value: 'vip'
//   },
  {
    icon: new URL('@/assets/icons/profile/follow.webp', import.meta.url).href,
    activeIcon: new URL('@/assets/icons/profile/follow-active.webp', import.meta.url).href,
    name: '我的关注',
    value: 'follow'
  },
  {
    icon: new URL('@/assets/icons/profile/collect.webp', import.meta.url).href,
    activeIcon: new URL('@/assets/icons/profile/collect-active.webp', import.meta.url).href,
    name: '我的收藏',
    value: 'collection'
  },
  {
    icon: new URL('@/assets/icons/profile/level.webp', import.meta.url).href,
    activeIcon: new URL('@/assets/icons/profile/level-active.webp', import.meta.url).href,
    name: '我的等级',
    value: 'level'
  },
  {
    icon: new URL('@/assets/icons/profile/appointment.webp', import.meta.url).href,
    activeIcon: new URL('@/assets/icons/profile/appointment-active.webp', import.meta.url).href,
    name: '我的预约',
    value: 'appointment'
  },
  {
    icon: new URL('@/assets/icons/profile/message.webp', import.meta.url).href,
    activeIcon: new URL('@/assets/icons/profile/message-active.webp', import.meta.url).href,
    name: '喇叭消息',
    value: 'message'
  },
  {
    icon: new URL('@/assets/icons/profile/shop.webp', import.meta.url).href,
    activeIcon: new URL('@/assets/icons/profile/shop-active.webp', import.meta.url).href,
    name: '有料购买',
    value: 'shop'
  },
  //   {
  //     icon: new URL('@/assets/icons/profile/live.webp', import.meta.url).href,
  //     activeIcon: new URL('@/assets/icons/live-active.webp', import.meta.url).href,
  //     name: '申请主播',
  //     value: 'liveApplication'
  //   },
  {
    icon: new URL('@/assets/icons/profile/live.webp', import.meta.url).href,
    activeIcon: new URL('@/assets/icons/profile/live-active.webp', import.meta.url).href,
    name: '我要开播',
    value: 'liveApplication'
  }
])

const navigateTo = (routeName) => {
  if (!userStoreInfo.isLoggedIn) { // 检查是否登录
    appConfig.LoginModalHandle(true)
  } else if (route.name !== routeName) {
    router.push({ name: routeName })
  }
}
</script>

<style lang="scss" scoped>
.wrapper {
  width: 100%;
  min-width: 1200px;
  background: #f5f7ff;
  min-height: 100vh;
  .inner {
    width: 1200px;
    margin: 0 auto;
    padding-top: 20px;
  }
}
.profile-wrapper {
  display: flex;

  .sidebar {
    width: 200px;
    background-color: #fff;
    border-radius: 10px;
    padding: 20px 0;

    ul {
      list-style-type: none;
      padding: 0;
      margin: 0;

      li {
        display: flex;
        align-items: center;
        padding: 14px 20px;
        cursor: pointer;
        transition: background-color 0.3s;
        border-left: 3px solid transparent;
        color: #333;
        span {
          font-size: 14px;
        }
        &:hover {
          background-color: #e0e0e0;
          color: #16b13a;
        }

        &.active {
          background-color: #e8f5e9;
          color: #16b13a;
          border-left: 3px solid #16b13a;
        }

        img {
          width: 24px;
          height: 24px;
          margin-right: 10px;
        }
      }
    }
  }

  .content {
    flex: 1;
    margin-left: 20px;
    // padding: 20px;
  }
}
</style>
